<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useTradeStore } from "@/store/modules/tradeStore";
import AccountStat from "./components/AccountStat.vue";
import InstrumentStat from "./components/InstrumentStat.vue";
import OrderBook from "./components/OrderBook.vue";
import PriceInput from "./components/PriceInput.vue";
import TradeTabs from "./TradeTabs.vue";

defineOptions({
  name: "trade-panel"
});

const trade = useTradeStore();
trade.init();

const {
  tick,
  quantity,
  roundDigits,
  closeButtonLabel,
  isCloseDisabled,
  selectedApp
} = storeToRefs(trade);
</script>

<template>
  <div class="flex h-full flex-col">
    <div name="trade-panel">
      <account-stat />
      <!-- 标的信息 -->
      <instrument-stat />
      <!-- 订单信息 -->
      <div name="order-info" class="flex items-end justify-between px-3">
        <!-- 价量信息 -->
        <div class="flex w-1/2 flex-col gap-2">
          <div class="flex-bc gap-1">
            <div class="mr-1 text-xs text-nowrap text-gray-600">数量</div>
            <el-input-number
              :model-value="quantity"
              class="w-full!"
              :step="1"
              :min="1"
              :value-on-clear="1"
              size="small"
              step-strictly
              @update:model-value="trade.setQuantity(Number($event))"
            />
          </div>
          <div class="flex-bc gap-1">
            <div class="mr-1 text-xs text-nowrap text-gray-600">价格</div>
            <price-input />
          </div>
        </div>
        <order-book class="w-2/5" :tick="tick" :roundDigits="roundDigits" />
      </div>

      <div name="buttons" class="p-3">
        <div class="flex-bc gap-1">
          <el-button
            size="large"
            class="w-1/3 text-lg! font-medium!"
            type="danger"
            @click="trade.confirmOpenLongOrder"
            >买开</el-button
          >
          <el-button
            size="large"
            class="w-1/3 text-lg! font-medium!"
            type="success"
            @click="trade.confirmOpenShortOrder"
            >卖开</el-button
          >
          <el-button
            size="large"
            class="w-1/3 text-lg! font-medium!"
            type="default"
            :disabled="isCloseDisabled"
            @click="trade.confirmCloseOrder"
            >{{ closeButtonLabel }}</el-button
          >
        </div>
      </div>
    </div>

    <div class="min-h-0 flex-1">
      <trade-tabs :selected-app="selectedApp" />
    </div>
  </div>
</template>

<style scoped>
:deep(.el-input-number .el-input__inner) {
  font-size: 14px;
}
</style>
